<template>
  <qc-page-header @back="goBack"></qc-page-header>
  <a-card :bordered="false">
    <a-row :gutter="16">
      <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6" class="role-form-wrapper">
        <span>{{ t('org.app-action.appActionInfo') }}</span>
        <a-button type="link" @click="saveAppAction"> {{ t('component.button.saveText') }}</a-button>
        <a-divider />
        <app-action-form layout="vertical" ref="appActionFormRef" :actionId="actionId"></app-action-form>
      </a-col>
      <a-divider type="vertical" style="height: auto" />
      <a-col :xs="24" :sm="24" :md="24" :lg="15" :xl="17">
        <app-action-list :queryParam="queryParam"></app-action-list>
      </a-col>
    </a-row>
  </a-card>
</template>
<script lang='ts'>
import { defineComponent, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import AppActionForm from './component/app-action-form.vue'
import AppActionList from './component/app-action-list.vue'
import { appActionIndexPageUrl } from './interface'
export default defineComponent({
  name: 'OrgAppActionFrom',
  components: { AppActionForm, AppActionList },
  setup(props) {
    const { t } = useI18n()
    const router = useRouter()
    const appActionFormRef = ref()
    const actionId = router.currentRoute.value.params.id
    const queryParam = { parentId: actionId }
    const goBack = () => router.push({ path: appActionIndexPageUrl })
    const saveAppAction = () => appActionFormRef.value.onSubmit()
    return {
      appActionFormRef,
      t,
      actionId,
      queryParam,
      goBack,
      saveAppAction,
      ...toRefs(props),
    }
  },
})
</script>
<style lang='less' scoped>
::v-deep(.ant-divider-horizontal) {
  margin: 16px 0;
}

.role-form-wrapper ::v-deep(.ant-btn) {
  height: unset;
  float: right;
}

::v-deep(.qc-page-table .ant-card-body) {
  padding: 0 0px 24px 0px;
}

::v-deep(.qc-table-toolbar-container) {
  padding-top: 0px;
}
</style>